<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>密码策略信息列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form  addJobForm" action="" lay-filter="addJobForm" onsubmit="return false">
            <!--隐藏域属性配置 -->
            <input type="hidden" name="id" id="id">
            <input type="hidden" name="parameterJson" id="parameterJson">
            <!---------------------------------->
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin:0;">
                    <button lay-submit lay-filter="saveJob" class="layui-btn layui-btn-sm">保存</button>
                    <a  class="layui-btn layui-btn-sm layui-btn-danger viewJobList">返回</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">任务名<label style="color: red;">*</label></label>

                <div class="layui-input-block jobName" style="width:65%">
                    <input type="text" name="jobName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">任务类<label style="color: red;">*</label></label>
                <div class="layui-input-block className" style="width:65%">
                    <input type="text" name="className" id="className" autocomplete="off" class="layui-input">
                    <a id="verifyClass" lay-filter="verifyClass" class="layui-btn" style="position: absolute;right: -70px;top: 0px;">验证</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">任务描述:</label>
                <div class="layui-input-block memo" style="width:65%">
                    <textarea placeholder="请输入内容" name="memo" class="layui-textarea"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-card-body">
        <div class="layui-input-block" style="margin:0;">
            <a lay-filter="addParam" class="layui-btn layui-btn-sm" id="addParam">添加参数</a>
        </div>
        <table id="paramTable" class="layui-table" lay-even lay-size="lg">
            <colgroup>
                <col width="30%">
                <col width="30%">
                <col width="30%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th>参数名</th>
                <th>参数类型</th>
                <th>参数值</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <#if paramList?exists>
              <#list paramList as item>
              <tr>
                  <td><input name="paramName" value="${item.name?if_exists}"></td>
                  <td>
                      <select name="paramType">
                          <option value="int"<#if item.type=='int'> selected</#if>>int</option>
                          <option value="long"<#if item.type=='long'> selected</#if>>long</option>
                          <option value="float"<#if item.type=='float'> selected</#if>>float</option>
                          <option value="boolean"<#if item.type=='boolean'> selected</#if>>boolean</option>
                      </select>
                  </td>
                  <td><input name="paramValue"  value="${item.value?if_exists}"></td>
                  <td><a lay-submit lay-filter="delParam" class="layui-btn layui-btn-danger layui-btn-sm">删除</a></td>
              </tr>
              </#list>
            </#if>
            </tbody>
        </table>
    </div>
</div>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>
<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','form', 'layer',  'setter', 'commons', 'jquery','table'], function () {
        //参数table模板
        var PARAM_TABLE_TEMPLATE = '              <tr>\n' +
        '                  <td><input name="paramName" value="${item.name?if_exists}"></td>\n' +
        '                  <td>\n' +
        '                      <select name="paramType">\n' +
        '                          <option value="int">int</option>\n' +
        '                          <option value="long">long</option>\n' +
        '                          <option value="float">float</option>\n' +
        '                          <option value="boolean">boolean</option>\n' +
        '                      </select>\n' +
        '                  </td>\n' +
        '                  <td><input name="paramValue"  value="${item.value?if_exists}"></td>\n' +
        '                  <td><a lay-submit lay-filter="delParam" class="layui-btn layui-btn-danger layui-btn-sm">删除</a></td>\n' +
        '              </tr>';
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            commons = layui.commons,
            setter = layui.setter;
        form.render();
        var index = parent.layer.getFrameIndex(window.name);
        //保存
        form.on('submit(saveJob)', function (data) {
            $("#parameterJson").val(packParamToJson());
            // console.log(data.field);
            data.field.jobName = $("input[name=jobName]").val();
            data.field.className = $("input[name=className]").val();
            data.field.memo = $("textarea[name=memo]").val();
            data.field.parameterJson = packParamToJson();
            if(checkVal(data.field.jobName,data.field.className)){
            // console.log(data.field.parameterJson);
            // return;
                $.ajax({
                    url: serverPath.systemPath + setter.sysLinkPath + "scheduler/addJob",
                    type: "POST",
                    data: data.field,
                    dataType: 'json',
                    success: function (data) {
                        if(commons._filterRecord(data)){
                            layer.alert(data.msg,function () {
                                location.href = serverPath.systemPath+setter.sysLinkPath+'scheduler/view/jobList' ;
                                layer.close(index);
                            });
                        }else{
                            layer.msg(data.msg);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert("保存失败！" + XMLHttpRequest.status);
                    }
                });
            }
            
        });

        //取消
        $(".cancelFrom").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

        //返回
        $(".viewJobList").click(function(){
            $(this).attr("href", serverPath.systemPath+setter.sysLinkPath +"scheduler/view/jobList");
        });

       //点击[添加参数]按钮时，新添一行
        $("#addParam").click(function(){
            // console.log(PARAM_TABLE_TEMPLATE);
            var tableRow = $("#paramTable tbody").append(PARAM_TABLE_TEMPLATE);
            //避免重复绑定，先解绑【删除】按钮点击事件，然后再绑定；可以修改成每增加一行，给该行【删除】按钮单独绑定
            $("[lay-filter=delParam]").unbind("click");
            bindDelParamButton();
        });
        //点击paramTable【删除】
        function bindDelParamButton(){
            $("[lay-filter=delParam]").bind('click',function(){
                var obj = $(this);
                layer.confirm('确定删除？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    layer.close();
                    //删除当前行
                    obj.parents("tr").remove();
                    layer.close(index);
                }, function(){
                });
                return false;
            });
        }
        //初始化绑定【删除】按钮事件
        bindDelParamButton();
        //验证类是否存在
        $("#verifyClass").click(function(){
            var className = $("#className").val();
            if(!className){
                layer.alert("请先输入任务类名再点击验证按钮");
                return;
            }
            $.ajax({
                type: 'get'
                , url: serverPath.systemPath + setter.sysLinkPath + "scheduler/validClass?className=" + className
                , dataType: 'json'
                , success: function (data) {
                    layer.alert(data.msg);
                }
            });
        });
        //把paramTable参数行数据拼装成json
        // 格式：[{"name":"test1","type":"int","value":"1"},{"name":"test2","type":"string","value":"dd"}]
        function packParamToJson(){
            var obj = $("#paramTable tbody tr");
            var jsonParam = [];
            obj.each(function(){
                var row = $(this);
                var _name = row.find("input[name=paramName]").val();
                var _type = row.find("select").val();
                var _value = row.find("input[name=paramValue]").val();
                var paramElement = {"name":_name,"type":_type,"value":_value};
                jsonParam.push(paramElement);
            });
            return JSON.stringify(jsonParam);
        }
    });


    //添加定时任务参数检验
    function checkVal(jobname,classname){
        if(jobname=='' || classname==''){
            layer.alert("必填参数不能为空！");
            return false;
        }else if(jobname.length >= 20){
            layer.alert("任务名长度不能超过20位！");
            return false;
        }else{
            return true;
        }
    };
</script>
</body>
</html>